<script setup>
import moment from "moment-timezone";

import { computed, ref, reactive, onMounted, onUnmounted } from "vue";

const arr = [9, 10, 11, 12, 1, 2, 3, 4, 5, 6, 7, 8];
let TimeZone = ref("Asia/Shanghai");

let CurrentTimeIns = reactive({
  time: moment().tz(TimeZone.value),
  zone: TimeZone.value,
});

let FormatTime = computed(() => {
  return CurrentTimeIns.time.format();
});

let CurrentHours = computed(() => {
  const currentHour = CurrentTimeIns.time.toArray()[3];
  const currentMinute = CurrentTimeIns.time.toArray()[4];
  return ((currentHour % 12) + currentMinute / 60) * (360 / 12);
});

let CurrentMinutes = computed(() => {
  const currentMinute = CurrentTimeIns.time.toArray()[4];
  const currentSecond = CurrentTimeIns.time.toArray()[5];
  return (currentMinute + currentSecond / 60) * (360 / 60);
});

let CurrentSeconds = computed(() => {
  const currentSecond = CurrentTimeIns.time.toArray()[5];
  return currentSecond * (360 / 60);
});

const UpdateTime = () => {
  CurrentTimeIns.time = moment().tz(TimeZone.value);
};

let timer = ref(null);
onMounted(() => {
  console.log("onMounted");
  timer = setInterval(() => {
    UpdateTime();
  }, 1000);
});

onUnmounted(() => {
  console.log("onUnmounted");
  clearInterval(timer);
});

const ChangeTimeZones = (e) => {
  console.log(e.target.value);
  TimeZone.value = e.target.value;
};
</script>

<template>
  <div id="wrap">
    <h2>使用原生状态版</h2>
    <h2>当前时区 - {{ TimeZone }}</h2>
    <h2>标准时间 - {{ FormatTime }}</h2>
    <!-- <div>{{ FormatTime }}</div> -->
    <!-- <div>{{ CurrentHours }}</div>
  <div>{{ CurrentMinutes }}</div>
  <div>{{ CurrentSeconds }}</div> -->

    <div id="clock">
      <div id="number">
        <div
          v-for="(item, index) in arr"
          :style="{ transform: 'rotate(' + index * 30 + 'deg)' }"
          :key="index"
        >
          <span :style="{ transform: 'rotate(' + index * -30 + 'deg)' }">
            {{ item }}
          </span>
        </div>
      </div>
      <span
        id="hour"
        className="pointer"
        :style="{
          transform: 'rotate(' + CurrentHours + 'deg)',
          transition: 'all 1s',
        }"
      ></span>
      <span
        id="minute"
        className="pointer"
        :style="{
          transform: 'rotate(' + CurrentMinutes + 'deg)',
          transition: 'all 1s',
        }"
      ></span>
      <span
        id="second"
        className="pointer"
        :style="{
          transform: 'rotate(' + CurrentSeconds + 'deg)',
          transition: 'all 1s',
        }"
      ></span>
    </div>

    <div id="choose">
      <span id="tips">请选择地区</span>
      <select @change="ChangeTimeZones">
        <option
          v-for="(zones, index) in moment.tz.names()"
          :value="zones"
          :key="zones"
          :selected="zones === 'Asia/Shanghai'"
        >
          {{ zones }}
        </option>
      </select>
    </div>
  </div>
</template>
<style scoped>
#wrap {
  position: absolute;
  top: 80px;
  left: 1000px;
  margin: 50px;
  width: 500px;
  height: 230px;
  margin-top: 100px;
}

#clock {
  position: relative;
  margin: 30px 70px;
  border: 15px solid #6df2f9;
  border-radius: 115px;
  width: 200px;
  height: 200px;
  background: #f7f5f5;
}
#number div {
  position: absolute;
  left: 10px;
  top: 90px;
  width: 190px;
  height: 20px;
}
#number span {
  display: block;
  width: 20px;
  height: 20px;
}
.pointer {
  position: absolute;
  bottom: 90px;
  transform-origin: 50% 90%;

  -webkit-transform-origin: 50% 90%;
}
#hour {
  left: 98px;
  width: 5px;
  height: 60px;
  background: black;
}
#minute {
  left: 99px;
  width: 3px;
  height: 70px;
  background: gray;
}

#second {
  left: 100px;
  width: 1px;
  height: 80px;
  background: red;
}

#currentMoment {
  margin: 14px 7px;
}
#choose {
  margin-left: 20px;
}
#tips {
  font-size: 18px;
  font-weight: 600;
}

select {
  margin-left: 20px;
  font-size: 18px;
  font-weight: 500;
  height: 25px;
  width: 230px;
}
</style>
